<style>
.pure_form_extra { background: #fff; padding: 10px; border: 1px solid #aaa; border-radius: 8px; font-size: 12px; }
.pure_form_extra * { font-size: 12px !important; }
</style>

<div class="pure-form pure-form-aligned pure_form_extra" style="padding: 10px; width: 480px;">
  <legend>修改密码</legend>

  <div class="pure-control-group">
    <label>老密码</label>
    <input id="oldpass" type="password" class="pure-input-1-2" placeholder="{Old Password}" />
  </div>
  
  <div class="pure-control-group">
    <label>新密码</label>
    <input id="pass" type="password" class="pure-input-1-2" placeholder="{Password}" />
  </div>
  
  <div class="pure-control-group">
    <label>确认</label>
    <input id="retype" type="password" class="pure-input-1-2" placeholder="{Retype Password}" />
  </div>
  
  <div class="pure-control-group">
    <label>&nbsp;</label>
    <button class="pure-button pure-input-1-2 pure-button-primary" onclick="set_pass();">Save</button>
  </div>
</div>

<script type="text/javascript">
  /*<![CDATA[*/
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  
  
  function set_pass() {
    var req = {
      oldpass: $('#oldpass').val(),
      pass: $('#pass').val(),
      retype: $('#retype').val()
    }
    
    Ajax.request(
      __requrl + 'set_pass',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        Utils.block_ui();
        location.reload();
      },
      null
    );
  };
  /*]]>*/
</script>